<template>
  <div class="dialog-box">
    <el-dialog v-model="dialogVisible" width="80%" draggable top="2vh" @close="handleCloseDialog">
      <template #title>
        <div class="dialog-title">
          <span class="key">预报调度</span>
          <!-- <span class="value">{{ state.scName }}</span> -->
        </div>
      </template>
      <div class="result-box">
        <div class="tabs-box">
          <div class="tabs-title">
            <el-input v-model="state.name" placeholder="请输入">
              <template #append>
                <el-icon @click="handleClickIcon()">
                  <Search />
                </el-icon>
              </template>
            </el-input>
          </div>

          <el-tree
            ref="elTreeRef"
            highlight-current
            style="max-width: 600px"
            :data="state.sectionArr"
            :props="{
              children: 'children',
              label: 'groupName'
            }"
            node-key="blkcd"
            :current-node-key="4"
            default-expand-all
            @node-click="handleClickTabs"
          >
            <template #default="{ node, data }">
              <el-tooltip
                class="item"
                effect="dark"
                placement="top"
                :content="node.label"
                :disabled="node.label.length < 6"
              >
                <div class="tree-item">
                  <span class="node">{{ node.label }}</span>
                </div>
              </el-tooltip>
            </template>
          </el-tree>
        </div>
        <div class="box-right">
          <div class="switch-box">
            <div class="echarts-img">
              <div class="echarts-img-switch">
                <el-button v-if="!state.imgOpen" type="text" @click="handleOpenImg">展开</el-button>
                <el-button v-if="state.imgOpen" type="text" @click="handleCloseImg">收起</el-button>
              </div>
              <!-- <Map @onload="handleMapLoad" :options="mapOptions" /> -->
              <!-- <img v-if="state.imgOpen" src="@/assets/images/dispatch/map.png" /> -->
              <div v-if="state.imgOpen" class="map-ght">
                <mapLeftlet
                  basinCode="WDA"
                  style="height: 100%"
                  v-model:selectedSTCD="state.selectedSTCD"
                  :geojsonPath="state.mapObj"
                  :dataGetter="getReuslt"
                  @clicked="showSelected"
                  @clickedData="handleData"
                />
              </div>
            </div>
            <!-- 选择调度方案 -->
            <div class="plan-box">
              <div class="plan-box-left">调度方案：</div>
              <div class="plan-box-right">
                <el-checkbox-group v-model="state.checkValue" @change="handleCheckBox">
                  <el-checkbox
                    v-for="(item, index) in state.childSchemeList"
                    :key="index"
                    :label="item.scid"
                    >{{ item.scName }}</el-checkbox
                  >
                </el-checkbox-group>
              </div>
            </div>
            <div class="right-btn-plus">
              <div class="title">{{ state.blkcdName }}-预报结果</div>
            </div>

            <div class="flex-btn-box">
              <div class="ul-box">
                <div
                  v-for="(item, index) in state.showBgItem"
                  :key="index"
                  :class="['ul-item', state.flagItem == index ? 'clickBg' : '']"
                  @click="handleClickShow(index)"
                >
                  {{ item }}
                </div>
              </div>
            </div>
            <div class="tabs-name-box">
              <el-tabs v-model="state.activeName" class="demo-tabs" @tab-click="handleClick">
                <el-tab-pane label="过程线" name="first">
                  <div class="echarts-table-box">
                    <div class="echarts-box" v-show="state.tableShow">
                      <SwDispatchChart
                        chart-key="detail"
                        v-if="state.waterFlag == 1"
                        height="100%"
                        :x-labels="state.sysTimes"
                        :servers="state.servers"
                      />
                      <SkDispatchChart
                        chart-key="detail"
                        :is-show="true"
                        v-else
                        height="100%"
                        :x-labels="state.sysTimes"
                        :servers="state.servers"
                      />
                    </div>
                    <div
                      :class="['table-box', state.tableShow ? '' : 'table-box-show']"
                      v-show="!state.showTable"
                    >
                      <el-table
                        :data="state.servers[0]?.ccResult"
                        border
                        v-if="state.waterFlag == 2"
                      >
                        <el-table-column
                          prop="tm"
                          label="时间"
                          show-overflow-tooltip
                          align="center"
                        >
                        </el-table-column>
                        <el-table-column
                          prop="fp"
                          label="降雨量"
                          show-overflow-tooltip
                          align="center"
                        >
                        </el-table-column>
                        <el-table-column
                          prop="jp"
                          label="净雨值"
                          show-overflow-tooltip
                          align="center"
                        >
                        </el-table-column>
                        <el-table-column
                          prop="name"
                          label="入库流量（实测/预报）"
                          show-overflow-tooltip
                          align="center"
                        >
                          <template #default="{ row }">
                            {{
                              `${row.rq !== '' ? row.rq : '--'}/${row.fq !== '' ? row.fq : '--'}`
                            }}
                          </template>
                        </el-table-column>
                        <el-table-column
                          prop="address"
                          label="出库流量（实测/预报）"
                          show-overflow-tooltip
                          align="center"
                        >
                          <template #default="{ row }">
                            {{
                              `${row.rotq !== '' ? row.rotq : '--'}/${
                                row.otq !== '' ? row.otq : '--'
                              }`
                            }}
                          </template>
                        </el-table-column>
                        <el-table-column
                          prop="address"
                          label="水库水位（实测/预报）"
                          show-overflow-tooltip
                          align="center"
                        >
                          <template #default="{ row }">
                            {{
                              `${row.rzr !== '' ? row.rzr : '--'}/${row.zr !== '' ? row.zr : '--'}`
                            }}
                          </template>
                        </el-table-column>
                      </el-table>
                      <el-table :data="state.servers[0]?.ccResult" border v-else>
                        <el-table-column
                          prop="tm"
                          label="时间"
                          show-overflow-tooltip
                          align="center"
                        >
                        </el-table-column>
                        <el-table-column
                          prop="fp"
                          label="降雨量"
                          show-overflow-tooltip
                          align="center"
                        >
                          <el-table-column
                            prop="jp"
                            label="净雨值"
                            show-overflow-tooltip
                            align="center"
                          >
                          </el-table-column>
                        </el-table-column>
                        <el-table-column
                          prop="name"
                          label="河道流量（实测/预报）"
                          show-overflow-tooltip
                          align="center"
                        >
                          <template #default="{ row }">
                            {{
                              `${row.rq !== '' ? row.rq : '--'}/${row.fq !== '' ? row.fq : '--'}`
                            }}
                          </template>
                        </el-table-column>
                        <el-table-column
                          prop="address"
                          label="河道水位（实测/预报）"
                          show-overflow-tooltip
                          align="center"
                        >
                          <template #default="{ row }">
                            {{
                              `${row.rz !== '' ? row.rz : '--'}/${row.fz !== '' ? row.fz : '--'}`
                            }}
                          </template>
                        </el-table-column>
                      </el-table>
                      <!-- <el-tabs
                        v-model="state.activeName"
                        class="demo-tabs"
                        @tab-change="handleSwitchTab(state.activeName)"
                      >
                        <el-tab-pane label="计算成果" name="first">
                          <el-table
                            :data="state.servers[0]?.ccResult"
                            border
                            v-if="state.waterFlag == 2"
                          >
                            <el-table-column
                              prop="tm"
                              label="时间"
                              show-overflow-tooltip
                              align="center"
                            >
                            </el-table-column>
                            <el-table-column
                              prop="fp"
                              label="降雨量"
                              show-overflow-tooltip
                              align="center"
                            >
                            </el-table-column>
                            <el-table-column
                              prop="name"
                              label="入库流量（实测/预报）"
                              show-overflow-tooltip
                              align="center"
                            >
                              <template #default="{ row }">
                                {{ `${row.rq || "--"}/${row.fq || "--"}` }}
                              </template>
                            </el-table-column>
                            <el-table-column
                              prop="address"
                              label="出库流量（实测/预报）"
                              show-overflow-tooltip
                              align="center"
                            >
                              <template #default="{ row }">
                                {{ `${row.rotq || "--"}/${row.otq || "--"}` }}
                              </template>
                            </el-table-column>
                            <el-table-column
                              prop="address"
                              label="水库水位（实测/预报）"
                              show-overflow-tooltip
                              align="center"
                            >
                              <template #default="{ row }">
                                {{ `${row.rzr || "--"}/${row.zr || "--"}` }}
                              </template>
                            </el-table-column>
                          </el-table>
                          <el-table
                            :data="state.servers[0]?.ccResult"
                            border
                            v-else
                          >
                            <el-table-column
                              prop="tm"
                              label="时间"
                              show-overflow-tooltip
                              align="center"
                            >
                            </el-table-column>
                            <el-table-column
                              prop="fp"
                              label="降雨量"
                              show-overflow-tooltip
                              align="center"
                            >
                            </el-table-column>
                            <el-table-column
                              prop="name"
                              label="河道流量（实测/预报）"
                              show-overflow-tooltip
                              align="center"
                            >
                              <template #default="{ row }">
                                {{ `${row.rq || "--"}/${row.fq || "--"}` }}
                              </template>
                            </el-table-column>
                            <el-table-column
                              prop="address"
                              label="河道水位（实测/预报）"
                              show-overflow-tooltip
                              align="center"
                            >
                              <template #default="{ row }">
                                {{ `${row.rz || "--"}/${row.fz || "--"}` }}
                              </template>
                            </el-table-column>
                          </el-table>
                        </el-tab-pane>
                        <el-tab-pane label="基本信息" name="second"
                          >基本信息</el-tab-pane
                        >
                        <el-tab-pane label="库容曲线" name="third"
                          >库容曲线</el-tab-pane
                        >
                        <el-tab-pane label="特征值示意图" name="fourth"
                          >特征值示意图</el-tab-pane
                        >
                        <el-tab-pane label="特征值" name="fifth">
                          <EigenValue
                            ref="mulTableRef"
                            :servers="state.servers"
                        /></el-tab-pane>
                      </el-tabs> -->
                    </div>
                  </div>
                  <div class="feature-box">
                    <div class="title">特征统计</div>

                    <!-- <el-table
                      :data="state.tableData"
                      style="width: 100%"
                      v-if="state.collapseActive == 1"
                    >
                      <el-table-column prop="date" label="预报模型" align="center" />
                      <el-table-column prop="date" label="调度类型" align="center" />

                      <el-table-column prop="name" label="实测/计算入流洪峰" align="center" />
                      <el-table-column
                        prop="address"
                        label="实测/计算入流洪现时间"
                        align="center"
                      />
                      <el-table-column prop="address" label="实测/计算入流洪量" align="center" />
                      <el-table-column prop="address" label="实测/计算最高库水位" align="center" />
                      <el-table-column prop="address" label="实测/计算最大出流" align="center" />

                      <el-table-column prop="address" label="产流系数" align="center" />
                    </el-table> -->
                    <el-table :data="state.servers" style="width: 100%">
                      <el-table-column prop="modelName" label="预报模型" align="center" />
                      <!-- <el-table-column prop="date" label="调度类型" align="center" /> -->

                      <el-table-column
                        label="计算/实测洪峰流量"
                        show-overflow-tooltip
                        align="center"
                      >
                        <template #default="{ row }">
                          {{ row.fcMxq + '/' + row.rlMxq }}
                        </template>
                      </el-table-column>
                      <el-table-column
                        label="计算/实测峰现时间"
                        show-overflow-tooltip
                        align="center"
                      >
                        <template #default="{ row }">
                          {{ row.fcMxt + '/' + row.rlMxt }}
                        </template>
                      </el-table-column>
                      <el-table-column
                        label="计算/实测洪水总量"
                        show-overflow-tooltip
                        align="center"
                      >
                        <template #default="{ row }">
                          {{ row.fcV + '/' + row.rlV }}
                        </template>
                      </el-table-column>
                      <el-table-column
                        prop="flCoef"
                        label="产流系数"
                        show-overflow-tooltip
                        align="center"
                      />
                    </el-table>
                  </div>
                </el-tab-pane>
                <el-tab-pane label="水库信息" name="second" v-if="state.sttp == 'RR'" lazy>
                  <waterInfo
                    :blkcdWater="state.blkcdId"
                    :rscd="state.rscd"
                    :scidObj="state.sdObj"
                  />
                </el-tab-pane>
                <el-tab-pane label="河道站点信息" name="second" v-if="state.sttp !== 'RR'" lazy>
                  <waterSiteInfo
                    :blkcdWater="state.blkcdId"
                    :rscd="state.rscd"
                    :scidObj="state.sdObj"
                    :stcd="state.selectedSTCD"
                  />
                </el-tab-pane>
              </el-tabs>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, nextTick, watch } from 'vue'
import waterInfo from './cpns/waterInfo/index.vue'
import waterSiteInfo from './cpns/waterSiteInfo/index.vue'
import mapLeftlet from '@/components/app-map/map_leaflet/hairtailSchematicDiagram.vue'
import {
  getGradeSections,
  getManualSchemesresult,
  getDispatchSchemeDetail,
  // 查询子方案
  childrenSchemes
} from '@/services/modules/dispatch-manage'
import { addTileLayer } from '@/utils/mapUtils'
import { assignUniqueIds, assignByParams } from '@/utils/index'
//水文
import SwDispatchChart from '@/components/app-echart/sw-dispatch-chart.vue'
//水库
import SkDispatchChart from '@/components/app-echart/sk-dispatch-chart.vue'
import { useDispatchManage1, useDispatchManageBlkcd } from '@/store/modules/dispatch-manage.js'
import { storeToRefs } from 'pinia'
import emitter from '@/utils/bus'
// const calcResult = ref({ info: {} })
// 地图初始化参数
const mapOptions = { crs: 'EPSG:4490', basemaps: [] }
const elTreeRef = ref(null)

const state = reactive({
  mapObj: {},
  selectedSTCD: '',
  imgOpen: false,
  checkedScheme: [],
  modelInfo: [],
  checkModelType: [],
  checkModels: [],
  models: [],
  modelType: [],
  flagItem: 0,
  tableShow: true,
  scName: '',
  blkcdName: '',
  scid: '',
  activeName: 'first',
  showTable: true,
  collapseActive: '1',
  servers: [],
  waterFlag: 1,
  sectionArr: [],
  blkcdId: '',
  tabNewData: [],
  evaResult: {},
  tableData: [
    {
      address: 'fsdf',
      name: '章三',
      date: '新安江'
    },
    {
      address: 'fsdf',
      name: '章三',
      date: '新安江'
    },
    {
      address: 'fsdf',
      name: '章三',
      date: '新安江'
    },
    {
      address: 'fsdf',
      name: '章三',
      date: '新安江'
    }
  ],
  //时间
  sysTimes: [],
  //降雨量
  rainArr: [],
  //实测流量
  rqArr: [],
  //模拟流量
  fqArr: [],
  //实测水位
  rzArr: [],
  //模拟水位
  fzArr: [],
  showBgItem: ['图', '混', '表'],
  // 子方案
  childSchemeList: [],
  activeItem: '',
  // 调度子方案id
  scId: '',
  // 多选框选中的值
  checkValue: [],
  // 存储调度方案的值，弹框关闭或者选择其它水库时将其清空
  scidStoreArr: [],
  // 暂时存储计算结果的数组
  serversStore: []
})
const dialogVisible = ref(false)
const props = defineProps({
  watershedId: {
    type: String,
    default: ''
  }
})

// 多选框选择调度方案回调
async function handleCheckBox() {
  // 暂存没有选择过的scid
  let zcIdArr = []
  nextTick(() => {
    emitter.emit('clearEcharts')
    emitter.emit('initEcharts')
  })
  if (state.checkValue.length > 0) {
    state.checkValue.forEach(async (e) => {
      // 如果结果数组中没有选中的这个方案的id
      console.log(state.scidStoreArr, '数组id')

      // 如果对应的id不存在
      if (!state.scidStoreArr.includes(e)) {
        zcIdArr.push(e)
      } else {
        // 如存在 则将结果数组中的对应checkValue的scid的对象全部拿出
        state.servers = []

        state.serversStore.forEach((a) => {
          if (state.checkValue.includes(a?.scid)) {
            state.servers.push(JSON.parse(JSON.stringify(a)))
          }
        })
        console.log(state.servers, '全部')
      }
    })
    // 调用接口获取结果
    await acceptComputeResult(zcIdArr)
    if (zcIdArr.length) {
      state.servers = []
      state.serversStore.forEach((a) => {
        if (state.checkValue.includes(a?.scid)) {
          state.servers.push(JSON.parse(JSON.stringify(a)))
        }
      })
      console.log(state.servers, state.serversStore, '输出')
      // state.servers = JSON.parse(JSON.stringify(state.serversStore))
    }
    // state.checkValue.forEach(async (e) => {
    //   // 如果结果数组中没有选中的这个方案的id
    //   if (!state.scidStoreArr.includes(e)) {
    //     // 则调用接口获取
    //     await acceptComputeResult(e)
    //     state.servers = JSON.parse(JSON.stringify(state.serversStore))
    //   } else {
    //     // 如存在 则将结果数组中的对应checkValue的scid的对象全部拿出
    //     state.servers = []

    //     state.serversStore.forEach((a) => {
    //       if (state.checkValue.includes(a?.scid)) {
    //         state.servers.push(a)
    //       }
    //     })
    //   }
    // })
  } else {
    state.servers = []
  }
}
// 选中概化图中的某一项 对应左侧选中效果
function showSelected(elem) {
  handleClickTabs(assignByParams(state.sectionArr, 'stcd', elem.properties.STCD))
  elTreeRef.value?.setCurrentKey(
    assignByParams(state.sectionArr, 'stcd', elem.properties.STCD).blkcd
  )
}
// 点击水库
async function handleClickTabs(item) {
  // debugger
  if (!item?.blkcd) {
    return false
  }
  state.sttp = item.sttp
  state.selectedSTCD = item.stcd

  state.rscd = item?.rscd

  if (item) {
    state.blkcdName = item?.groupName
    state.blkcdId = item?.blkcd ? item?.blkcd : ''

    if (item.sttp == 'RR') {
      state.waterFlag = 2
    } else {
      state.waterFlag = 1
    }
    // 点击水库，将存储的方案结果和id，图表传的值 都清空，并默认选中第一个方案
    state.serversStore = []
    state.scidStoreArr = []
    state.servers = []
    // state.checkValue = [state.childSchemeList[0]?.scid]
    handleCheckBox()
  }
}
// 获取对应计算结果
// state.scId：子方案id
function acceptComputeResult(scidArr) {
  if (scidArr.length > 0) {
    return new Promise((resolve, reject) => {
      getManualSchemesresult({
        scid: scidArr.join(),
        blkcd: state.blkcdId
      }).then((res) => {
        if (res.code === 200) {
          if (res.data.length) {
            let arr = []
            arr = res.data.map((item) => {
              return {
                ...item,
                result: [{ ccResult: item.ccResult, warnInfo: item.warnInfo }]
              }
            })
            // if (state.checkValue.length > 1) {

            // } else {
            //   state.serversStore = arr
            // }
            state.serversStore.push(...arr)
            // 将计算结果存储起来
            // state.serversStore.push(arr[0])

            state.serversStore.forEach((e) => {
              state.scidStoreArr.push(e.scid)
            })
            // 数组去重 结果去重
            state.serversStore = Array.from(
              new Set(state.serversStore.map(JSON.stringify)),
              JSON.parse
            )
            // scid去重
            state.scidStoreArr = Array.from(new Set(state.scidStoreArr))
            resolve(res.data)
          }
        }
      })
    })
  }
}
function handleOpenImg() {
  // 展开概化图
  state.imgOpen = true
}
function handleCloseImg() {
  // 关闭概化图
  state.imgOpen = false
}
// 弹框关闭回调
function handleCloseDialog() {
  storeToRefs(useDispatchManageBlkcd()).showDialogResultGc.value = false

  state.imgOpen = false
  state.servers = []
  state.scidStoreArr = []
  state.serversStore = []
  state.checkValue = []
}

// const subscribe1 = useDispatchManageBlkcdGc().$subscribe(
//   (mutation, state) => {
//     if (state.blkcdGc) {
//       if (useDispatchManage1().leftSelectList == '工程预报') {
//         handleOpenModal(
//           {
//             fatherId: useDispatchManage1().fatherId,
//             fatherTypeId: useDispatchManage1().fatherTypeId
//           },
//           state.blkcdGc
//         )
//       }
//     }
//   },
//   { detached: false }
// )
watch(
  () => storeToRefs(useDispatchManageBlkcd()).showDialogResultGc.value,
  () => {
    if (storeToRefs(useDispatchManageBlkcd()).showDialogResultGc.value == true) {
      // debugger
      dialogVisible.value = true
      handleOpenModal(
        {
          fatherId: storeToRefs(useDispatchManageBlkcd()).scid.value,
          fatherTypeId: useDispatchManage1().fatherTypeId
        },
        useDispatchManageBlkcd().blkcd
      )
    }
  },
  {
    deep: true
  }
)
// watch(
//   () => {
//     useDispatchManageBlkcdGc().$state.blkcdGc
//   },
//   () => {
//     console.log('监听到了232')
//   },
//   {
//     immediate: true,
//     deep: true
//   }
// )
// emitter.on('showGcDialog', () => {
//   console.log('加上');
//   if (useDispatchManage1().leftSelectList == '工程预报') {
//     handleOpenModal(
//       {
//         fatherId: useDispatchManage1().fatherId,
//         fatherTypeId: useDispatchManage1().fatherTypeId
//       },
//       state.blkcdGc
//     )
//   }
// })
// 打开弹框
async function handleOpenModal(objVal, blkcd) {
  // debugger

  dialogVisible.value = true
  if (props.watershedId == 1) {
    state.mapObj = {
      WDA: {
        gaihuatuPath: './data/gaihuatuDWHHairtail.geojson'
      }
    }
  } else if (props.watershedId == 2) {
    state.mapObj = {
      WDA: {
        gaihuatuPath: 'data/gaihuatuYSH.geojson'
      }
    }
  }
  state.fatherId = objVal.fatherId
  // 获取调度方案
  await handleChangeSelect(objVal)
  // 获取水库
  await handleClickIcon()
  // 回显水库
  showSelectedSubscribe(blkcd)

  await acceptDispatchSchemeDetail(objVal.fatherId)
}

// 选中map中的某一项 对应左侧选中效果
function showSelectedSubscribe(blkcd) {
  console.log(state.sectionArr, '选中某')
  elTreeRef.value?.setCurrentKey(blkcd)
  handleClickTabs(assignByParams(state.sectionArr, 'blkcd', blkcd))
}
// 获取调度方案
const handleChangeSelect = (val) => {
  return new Promise((resolve, reject) => {
    childrenSchemes({ scid: val.fatherId, model: val.fatherTypeId }).then((res) => {
      if (res.code === 200) {
        // 获取子方案
        state.childSchemeList = res.data
        state.childSchemeList = state.childSchemeList.filter((item) => {
          return item.status == 2 || item.status == 5
        })
        // 默认选中第一个子方案
        state.checkValue = [state.childSchemeList[0]?.scid]
        resolve(res.data)
      }
    })
  })
}
// 获取父级方案详情
function acceptDispatchSchemeDetail(scid) {
  return new Promise((resolve, reject) => {
    getDispatchSchemeDetail({ scid, scBelong: 0 }).then((res) => {
      if (res.code === 200) {
        state.sdObj = res.data

        resolve(res.data)
      }
    })
  })
}
// 文字数量超过之后隐藏
// function switchText(name) {
//   if (name.length > 8) {
//     return name.slice(0, 8) + '...'
//   } else {
//     return name
//   }
// }
// const combine = (arr) => {
//   // 1. 设置结果集
//   const result = []

//   // 2. 遍历收集
//   for (let i = 0; i < arr[0].length; i++) {
//     for (let j = 0; j < arr[1].length; j++) {
//       result.push([arr[0][i], arr[1][j]])
//     }
//   }
//   return result
// }
//展开
function handleClickShow(val) {
  nextTick(() => {
    // emitter.emit('clearEcharts')
    emitter.emit('initEcharts')
  })
  state.flagItem = val
  // state.showTable = !state.showTable;
  if (val == 0) {
    // 图
    state.showTable = true
    state.tableShow = true
  } else if (val == 1) {
    // 混
    state.showTable = false
    state.tableShow = true
  } else {
    //表
    state.showTable = false
    // 将图关闭
    state.tableShow = false
  }
  nextTick(() => {
    // emitter.emit('clearEcharts')
    emitter.emit('initEcharts')
  })
}
function updateLeafProperty(data) {
  // 递归函数，只修改最后一层的属性名
  const isLeaf = (item) => !Array.isArray(item.children)
  const update = (item) => {
    if (isLeaf(item)) {
      if (Object.prototype.hasOwnProperty.call(item, oldPropertyName)) {
        item[newPropertyName] = item[oldPropertyName]
        delete item[oldPropertyName]
      }
    } else {
      item.children = item.children.map(update)
    }
    return item
  }
  const oldPropertyName = 'blknm'
  const newPropertyName = 'groupName'
  state.sectionArr = data.map(update)
  assignUniqueIds(state.sectionArr)
  // handleClickTabs(state.sectionArr[0].children[0].children[0].children[0], 0)
}
// 获取水库及水文站
function handleClickIcon() {
  return new Promise((resolve, reject) => {
    getGradeSections({ scid: state.fatherId, blknm: state.name ? state.name : '' }).then((res) => {
      if (res.code === 200) {
        state.sectionArr = res.data
        updateLeafProperty(state.sectionArr)
        resolve(res.data)
      }
    })
  })
}

defineExpose({ handleOpenModal })
</script>

<style lang="less" scoped>
.dialog-box {
  :deep(.el-dialog__body) {
    padding-top: 10px !important;
  }
}

.dialog-title {
  padding-bottom: 5px;
  height: 25px;
  border-bottom: 2px solid #eee;
  font-size: 14px;
  .key {
    color: aqua;
  }
  .value {
    color: #424242;
  }
}
.result-box {
  width: 100%;
  height: 80vh;
  display: flex;
  .tabs-box {
    width: 200px;
    height: 100%;
    margin-right: 10px;
    padding-right: 5px;
    border-right: 1px solid #f2f2f2;
    .tabs-title {
      height: 30px;
      background: #f2f2f2;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      span {
        font-weight: 600;
      }
    }
    :deep(.el-tree) {
      height: calc(100% - 40px);
      overflow-y: auto;
      margin-top: 5px;
      .el-tree-node {
        &.is-focusable.is-current {
          > div:nth-of-type(1) {
            color: #409eff;
            font-weight: 600;
            font-size: 15px;
          }
        }
        .el-tree-node__content {
          margin-top: 5px;
        }
      }
      .position-btn {
        margin-right: 20px;
      }
      .position-btn:hover {
        color: #0154db;
      }
      .tree-item {
        &.active {
          span {
            color: #0154db;
          }
        }
        .node {
          width: 100px;
          display: inline-block;
          overflow: hidden; /* 确保超出容器的文本被裁剪 */
          white-space: nowrap; /* 确保文本在一行内显示 */
          text-overflow: ellipsis; /* 超出部分显示为省略号 */
          // font-size: var(--content-fontsize);
        }
      }
    }

    .tabs-list {
      // height: calc(100% - 30px);
      // background: #d7d4d427;
      // overflow-y: auto;
      .list-item {
        width: 100%;
        height: 30px;
        text-align: center;
        cursor: pointer;
        &.active {
          span {
            color: #0154db;
          }
        }
        span {
          width: 100%;
          color: black;
          display: inline-block;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
      .list-item:hover {
        width: 100%;
        height: 30px;
        cursor: pointer;
        span {
          color: #0154db;
        }
      }
    }
  }
  .box-right {
    flex: 1;
    width: calc(100% - 155px);
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    .echarts-img {
      width: 100%;
      // height: 200px;
      max-height: 230px;
      min-height: 30px;
      .echarts-img-switch {
        display: flex;
        justify-content: flex-end;
        height: 30px;
      }
      // img {
      //   width: 100%;

      //   height: calc(100% - 30px);
      // }
      .map-ght {
        width: 100%;

        height: 200px;
      }
    }
    .plan-box {
      display: flex;
      height: 50px;
      width: 100%;
      margin-bottom: 10px;
      font-size: 14px;
      // overflow-x: auto;
      // background-color: rebeccapurple;
      .plan-box-left {
        display: flex;
        align-items: center;
        width: 110px;
        height: 100%;
        color: #909399;
        font-weight: 600;
      }
      .plan-box-right {
        display: flex;
        align-items: center;
        width: calc(100% - 110px);
        overflow-x: auto;
        white-space: nowrap;

        .plan-item {
          flex-shrink: 0;
          display: inline-block;
          cursor: pointer;
          font-weight: 500;
          padding: 0 30px;
          height: 25px;
          width: 130px !important;
          border: 1px solid #0773d1;
          white-space: nowrap;
          border-radius: 20px;
          line-height: 25px;
          text-align: center;
          margin-right: 20px;
        }
        .plan-item:hover {
          // border: 2px solid #3fa0f5;
          background-color: #328dde;
          color: white;
        }
        .item-active {
          width: 140px;
          color: white;
          background-color: #328dde;
        }
        // overflow-x: auto;
      }
    }
    .comput-times {
      width: 100%;
      height: 70px;
      .times-title {
        height: 30px;
        span {
          font-weight: 600;
        }
      }
      .times-list {
        display: flex;
        width: 100%;
        height: 40px;
        overflow-x: auto;
        white-space: nowrap;
        .times-item {
          width: 200px;
          height: 30px;
          border: 1px solid gray;
          border-radius: 8px;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-right: 10px;
          padding: 0 15px;
          cursor: pointer;
          &.active {
            span {
              color: #0154db;
            }
          }
          &:hover {
            color: #0154db;
          }
          span {
            color: gray;
          }
        }
      }
    }
    .switch-box {
      width: 100%;
      heightplan-boxmax: 100%;
      .right-btn-plus {
        width: 100%;
        height: 50px;
        display: flex;
        justify-content: flex-end;
        .title {
          line-height: 50px;
          color: #409eff;
          margin-right: 40%;
        }
        .btn-plus {
          font-size: 25px;
          font-weight: bold;
        }
      }
      // .comput-result-box {
      //   width: 100%;
      //   .box-title {
      //     height: 30px;
      //     padding-top: 10px;
      //     span {
      //       font-weight: 600;
      //     }
      //   }
      //   .box-form {
      //     .form-item {
      //       display: flex;
      //       justify-content: space-between;
      //       // flex-wrap: wrap;
      //       // width: 100%;
      //       margin-left: 5px;
      //       .pass {
      //         color: #78ba1c;
      //       }
      //       .item-title {
      //         // flex: 0.25;
      //         margin-right: 20px;
      //         height: 30px;
      //         &:nth-of-type(1) {
      //           width: 35%;
      //         }
      //         span:nth-of-type(1) {
      //           margin-right: 10px;
      //         }
      //         span:nth-of-type(2) {
      //           font-weight: 600;
      //         }
      //       }
      //     }
      //   }
      // }
      // .computed-table {
      //   width: 100%;
      //   // height: 80px;
      //   overflow-x: auto;
      // }
      .flex-box {
        display: flex;
        justify-content: flex-start;
      }
      .flex-btn-box {
        display: flex;
        justify-content: flex-end;
        // justify-content: flex-end;

        .ul-box {
          display: flex;
          justify-content: space-around;
          line-height: 100%;
          margin-right: 50px;
          text-align: center;
          // margin-bottom: 20px;
          width: 100px;
          height: 100%;
          border-radius: 20px;
          background-color: rgba(1, 84, 219, 0.3);

          .ul-item {
            width: 30px;
            height: 100%;
            border-radius: 20px;
            // background-color: #0154db;
            color: #ffffff;
            cursor: pointer;
            &:hover {
              background-color: #0154db;
              color: wheat;
            }
          }
          .clickBg {
            background-color: #0154db;
          }
        }
      }
      .tabs-name-box {
        width: 100%;
        // height: calc(100% - 350px);
        height: 900px;
        :deep(.el-tabs) {
          z-index: 11;
          height: 100%;
          .el-tabs__content {
            height: calc(100% - 55px);
            .echarts-table-box {
              display: flex;
              width: 100%;
              // height: 65%;
              height: 600px;
              position: relative;
              overflow-y: auto;

              .echarts-box {
                flex: 1;
                // min-width: 49%;
                // height: 00px;
                height: 600px;

                // height: calc(100%);
                // padding: 5px;
                position: relative;
                .show-btn {
                  cursor: pointer;
                  position: absolute;
                  right: 0px;
                  top: 0px;
                }
              }
              .table-box {
                flex: 1;
                width: 50%;
                margin-left: 1%;
                position: relative;
                .el-table {
                  height: 100%;
                }
                .hide-btn {
                  cursor: pointer;
                  position: absolute;
                  height: 20px;
                  top: 10px;
                  right: 0;
                  z-index: 10;
                }
              }
              .table-box-show {
                width: 100% !important;
              }
            }
            .feature-box {
              .title {
                color: #409eff;
                margin: 5px 0 5px 20px;
              }
            }
            .el-tab-pane {
              height: 100%;
              .el-table {
                height: 150px;
                overflow-y: auto;
              }
            }
          }
        }
      }

      .btn-box {
        margin-right: 30px;
        display: flex;
        span {
          margin-right: 10px;
          line-height: 30px;
        }
        // text-align: right;
        // margin-right: 15px;
        // height: 30px;
      }
    }
  }
}
</style>
